<template>
	<view class="box-content">
		<view class="inner-box-content">
			<image v-if="technician_info && technician_info.work_image" class="header-img"
				:src="technician_info && technician_info.work_image[0]" mode=""></image>
			<view class="user-name" v-if="technician_info">
				{{technician_info.real_name}} <text>{{technician_info.age}}岁</text>
				<text>{{technician_info.gender == 1?'男':'女'}}</text>
			</view>
			<mescroll-body height="500px" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="list">
					<view class="each-list" v-for="(item,index) in orderInfo" :key="index">
						<view class="" style="display: flex;align-items: center;flex-wrap: wrap;">
							<view class="classify-lines">
								<view class="title left-title">项目名称：</view>
								<view>{{item.name}}</view>
							</view>
							<view class="classify-lines">
								<view class="title">总<view style="width:0.33em;"></view>金<view
										style="width:0.33em;"></view>额：</view>
								<view>¥{{item.pay_amount | reversedMessage(item.deduction_price)}}</view>
							</view>
							<view class="classify-lines">
								<view class="title">
									扣
									<view class="pp"></view>
									<view class="pp"></view>
									除：
								</view>
								<view>¥{{item.deduction_price }}</view>
							</view>
							<view class="classify-lines">
								<view class="title">佣金收入：</view>
								<view style="color: #FF0000;font-weight: bold;">¥{{ item.price }}</view>
							</view>
						</view>
						<view>
							<view class="classify-lines" style="width: 100%;">
								<view class="title left-title">起至时间：</view>
								<view>{{item.start_time}} <br />{{item.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import BigNumber from '@/common/js/bignumber.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				id: "",
				orderInfo: [],
				technician_info: {},
				downOption: {
					auto: false
				}
			}
		},
		filters: {
			reversedMessage(price1, price2) {
				var a1 = new BigNumber(price1)
				var a2 = new BigNumber(price2)
				return a1.plus(a2)

			}
		},
		onLoad(option) {
			this.id = option.id
			// this.getOrderInfo()
		},
		methods: {
			downCallback() {
				this.orderInfo = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "store.team/getWithdrawByOrder",
					method: "GET"
				}, {
					id: this.id,
					page: page.num
				}).then(res => {
					if (res.code == 0) {
						that.orderInfo = [...that.orderInfo, ...res.data.order.data]
						that.technician_info = res.data.technician_info
						that.mescroll.endSuccess(that.orderInfo.length, that.orderInfo.length == res.data.order
							.total ? false : true)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inner-box-content {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(232, 232, 232, 0.5);
		border-radius: 14rpx;
		padding: 30rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.header-img {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
		display: block;
		border-radius: 50%;
	}

	.user-name {
		font-size: 28rpx;
		font-weight: 400;
		color: #0F0807;
		line-height: 40rpx;
		margin: 27rpx 0;

		text {
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}

	.each-list {
		background: #F7F9F9;
		border-radius: 10rpx;
		padding: 30rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		margin-bottom: 20rpx;

		.classify-lines {
			width: 50%;
			display: flex;
			align-items: flex-start;
			color: #000000;
			font-size: 26rpx;
			margin-bottom: 10rpx;
			text-align: left;

			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #818181;
				line-height: 37rpx;
				text-align: left;
				display: flex;
				align-items: center;
			}

			.left-title {
				width: 140rpx;
				text-align: left;
			}

			.pp {
				width: 1em;
				// letter-spacing: 1em;
			}
		}
	}
</style>